<template>
  <div class="video-detail">
    <p class="back" @click="$router.back()">
      <van-icon name="arrow-left" />
      返回上一页
    </p>
    <img src="@/assets/shadowProject/video3.png" alt="#">
    <p class="title">STONE ISLAND MARINA</p>
    <div class="describe">
      <p>外套整体饰带，采用高性能三层面料制造。外层选取棉质尼龙于提花织机上制成，光泽聚酯面料装饰STONE ISLAND MARINA字纹。单品覆防风防水透气薄膜。</p>
      <p>卫衣、T恤与抓绒布百慕大短裤，采用棉与SeaqualR Yarn,一款高品质再生材料，包含约10%再循环海洋塑料与90%PET 来自陆地的消费后废料。</p>
      <p>Marina 概念商品以红色小星星刺绣为标志。</p>
    </div>
    <div class="describe">
      <p>整体包括外套式衬衫、长裤、百慕大短裤、沙滩裤与渔夫帽。</p>
    </div>
    <div class="content">
      <img src="@/assets/videoDetail/img1.png" alt="#">
      <img src="@/assets/videoDetail/img2.png" alt="#">
      <img src="@/assets/videoDetail/img3.png" alt="#">
      <img src="@/assets/videoDetail/img4.png" alt="#">
      <img src="@/assets/videoDetail/img5.png" alt="#" style="width: 60%;">
    </div>
    <Introduce />
  </div>
</template>

<script>
import Introduce from '@/components/Introduce.vue'
export default {
  components: {
    Introduce
  }
}
</script>

<style lang="scss" scoped>
.video-detail {
  font-size: 0;
  width: 100%;
  overflow: hidden auto;
  .back {
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    letter-spacing: 3px;
    font-size: 16px;
    color: #666;
  }
  .title {
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    color: #333;
    border: 1px solid #666;
    font-weight: bold;
  }
  .describe {
    margin-top: 10px;
    padding: 0 20px;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    margin: 20px 0;
    img {
      width: 40%;
    }
  }
}
</style>